<!-- 分页组件 -->
<nav th:fragment="page(pageInfo, url, params, selector)" th:if="${not #lists.isEmpty(pageInfo?.list)}" class="mt-1" style="max-width: 100%" aria-label>
  <input type="hidden" th:value="${pageInfo.pageNum}" id="pageNum">
  <input type="hidden" th:value="${pageInfo.pageSize}" id="pageSize">
  <input type="hidden" th:value="${pageInfo.pages}" id="pages">
  <ul class="pagination justify-content-end">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="上一页">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li th:if="${pageInfo.pageNum != 1}" class="page-item">
      <a class="page-link" href="#">1</a>
    </li>
    <li th:if="${pageInfo.pageNum > 3}" class="page-item">
      <a class="page-link" href="#">...</a>
    </li>
    <li th:if="${pageInfo.pageNum > 2}" class="page-item">
      <a class="page-link" href="#" th:text="${pageInfo.pageNum - 1}"></a>
    </li>
    <li class="page-item active">
      <a class="page-link" href="#" th:text="${pageInfo.pageNum}"></a>
    </li>
    <li th:if="${pageInfo.pageNum < pageInfo.pages - 1}" class="page-item">
      <a class="page-link" href="#" th:text="${pageInfo.pageNum + 1}"></a>
    </li>
    <li th:if="${pageInfo.pageNum < pageInfo.pages - 2}" class="page-item">
      <a class="page-link" href="#">...</a>
    </li>
    <li th:if="${pageInfo.pageNum != pageInfo.pages}" class="page-item">
      <a class="page-link" href="#" th:text="${pageInfo.pages}"></a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="下一页">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
  <script th:inline="javascript">
    // 要请求的页面地址
    var url = [[${url}]];
    // 筛选参数
    var params = [[${params}]];
    // 要填充页面的元素的选择器
    var selector = [[${selector}]];
    
    // 选择页码
    $(".pagination>.page-item").on("click", function(event){
      var text = event.currentTarget.innerText;
      if (text == "...") {
        return;
      }
      // 当前页
      var pageNum = parseInt($("#pageNum").val());
      // 页大小
      var pageSize = parseInt($("#pageSize").val());
      // 总页数
      var pages = parseInt($("#pages").val());
      
      // 目标页码
      var targetPageNum;
      // 上一页
      if (text == "«") {
        targetPageNum = pageNum - 1;
      // 下一页
      } else if (text == "»") {
        targetPageNum = pageNum + 1;
      } else {
        targetPageNum = parseInt(text);
      }
      if (targetPageNum < 1 || targetPageNum > pages || targetPageNum == pageNum) {
        return;
      }
      getPage(targetPageNum, pageSize)
    });
    
    // 获取分页
    function getPage(pageNum, pageSize) {
      var req = {
        pageNum: pageNum,
        pageSize: pageSize,
        params: JSON.stringify(params)
      };
      // 请求页面
      $.get(url, req, function (resp) {
        if (selector == "html") {
          document.write(resp);
          document.close();
        } else {
          $(selector).html(resp);
        }
      });
    }
  </script>
</nav>

<!-- 带数据统计的分页组件 -->
<nav th:fragment="dspage(pageInfo, url, params, selector)" th:if="${not #lists.isEmpty(pageInfo?.list)}" class="container mt-1" style="max-width: 100%" aria-label>
  <input type="hidden" th:value="${pageInfo.pageNum}" id="pageNum">
  <input type="hidden" th:value="${pageInfo.pageSize}" id="pageSize">
  <input type="hidden" th:value="${pageInfo.pages}" id="pages">
  <div class="row d-flex justify-content-between">
    <div class="d-flex my-mid-vertical" style="height: 1.9rem;">
      <span class="text-secondary">共 [[${pageInfo?.total}]] 条记录</span>
      <select class="my-page-select text-secondary ml-2">
        <option value="10" th:selected="${pageInfo.pageSize == 10}">10条/页</option>
        <option value="20" th:selected="${pageInfo.pageSize == 20}">20条/页</option>
        <option value="50" th:selected="${pageInfo.pageSize == 50}">50条/页</option>
      </select>
    </div>
    <ul class="pagination pagination-sm">
      <li class="page-item">
        <a class="page-link" href="#" aria-label="上一页">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li th:if="${pageInfo.pageNum != 1}" class="page-item">
        <a class="page-link" href="#">1</a>
      </li>
      <li th:if="${pageInfo.pageNum > 3}" class="page-item">
        <a class="page-link" href="#">...</a>
      </li>
      <li th:if="${pageInfo.pageNum > 2}" class="page-item">
        <a class="page-link" href="#" th:text="${pageInfo.pageNum - 1}"></a>
      </li>
      <li class="page-item active">
        <a class="page-link" href="#" th:text="${pageInfo.pageNum}"></a>
      </li>
      <li th:if="${pageInfo.pageNum < pageInfo.pages - 1}" class="page-item">
        <a class="page-link" href="#" th:text="${pageInfo.pageNum + 1}"></a>
      </li>
      <li th:if="${pageInfo.pageNum < pageInfo.pages - 2}" class="page-item">
        <a class="page-link" href="#">...</a>
      </li>
      <li th:if="${pageInfo.pageNum != pageInfo.pages}" class="page-item">
        <a class="page-link" href="#" th:text="${pageInfo.pages}"></a>
      </li>
      <li class="page-item">
        <a class="page-link" href="#" aria-label="下一页">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </div>
  <script th:inline="javascript">
    // 要请求的页面地址
    var url = [[${url}]];
    // 筛选参数
    var params = [[${params}]];
    // 要填充页面的元素的选择器
    var selector = [[${selector}]];
    
    // 选择页码
    $(".pagination>.page-item").on("click", function(event){
      var text = event.currentTarget.innerText;
      if (text == "...") {
        return;
      }
      // 当前页
      var pageNum = parseInt($("#pageNum").val());
      // 页大小
      var pageSize = parseInt($("#pageSize").val());
      // 总页数
      var pages = parseInt($("#pages").val());
      
      // 选择的页码
      var targetPageNum;
      // 上一页
      if (text == "«") {
        targetPageNum = pageNum - 1;
      // 下一页
      } else if (text == "»") {
        targetPageNum = pageNum + 1;
      } else {
        targetPageNum = parseInt(text);
      }
      if (targetPageNum < 1 || targetPageNum > pages || targetPageNum == pageNum) {
        return;
      }
      getPage(targetPageNum, pageSize);
    });
    
    // 选择每页条数
    $(".my-page-select").on("change", function() {
      var pageNum = parseInt($("#pageNum").val());
      var pageSize = $(this).val();
      getPage(pageNum, pageSize);
    });
    
    // 获取分页
    function getPage(pageNum, pageSize) {
      var req = {
        pageNum: pageNum,
        pageSize: pageSize,
        params: JSON.stringify(params)
      };
      // 请求页面
      $.get(url, req, function (resp) {
        if (selector == "html") {
          document.write(resp);
          document.close();
        } else {
          $(selector).html(resp);
        }
      });
    }
  </script>
</nav>

<!-- 确认框 -->
<div th:fragment="confirm">
  <div class="modal fade" id="modal-confirm" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-center">
          <h6 class="modal-title">是否执行该操作？</h6>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary btn-sm" id="modal-confirm-sure">确定</button>
          <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">取消</button>
        </div>
      </div>
    </div>
  </div>
  <script th:inline="javascript">
    function confirm(msg, callback) {
      if (!isEmpty(msg)) {
        $("#modal-confirm .modal-title").html(msg);
      }
      if(callback != undefined && typeof(callback) == 'function'){
        $("#modal-confirm-sure").on("click", function() {
          $("#modal-confirm").modal('hide');
          callback();
        });
      }
      $("#modal-confirm").modal('show');
    }
  </script>
</div>